<template>
  {{ formData }}
  <a-form :model="passData" layout="inline">
    <a-form-item name="username" label="姓名">
      <a-input v-model:value="passData.username" />
    </a-form-item>
    <a-form-item name="email" label="邮箱">
      <a-input v-model:value="passData.email" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button @click="search">查询</a-button>
        <a-button @click="reset">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
  <div>
    <a-button @click="handleOpen">新增</a-button>
  </div>
  <a-table
    :columns="columns"
    :dataSource="dataSource"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <a-space v-if="column.dataIndex === 'methods'">
        <a-button @click="() => handleEdit(record)">编辑</a-button>
        <a-popconfirm
          title="你确认要删除这条数据吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="() => deleteItem(record.id)"
        >
          <a-button>删除</a-button>
        </a-popconfirm>
      </a-space>
    </template>
  </a-table>
  <!-- <a-modal
    @cancel="handleCancel"
    @ok="handleEditOrCreate"
    :title="formData.id ? '修改用户' : '新增用户'"
    :open="isOpen"
  >
    <a-form :model="formData">
      <a-form-item name="username" label="姓名">
        <a-input v-model:value="formData.username" />
      </a-form-item>
      <a-form-item name="email" label="邮箱">
        <a-input v-model:value="formData.email" />
      </a-form-item>
    </a-form>
  </a-modal> -->
  <AddEditModal
    v-if="isOpen"
    :is-open="isOpen"
    :editData="formData"
    @changeIsOpen="() => (isOpen = !isOpen)"
    @onSuccess="handleSuccess"
  />
</template>
<script setup>
import { ref } from "vue";
import AddEditModal from "./components/AddEditModal.vue";
import {
  getUsers,
  deleteUser,
  createUser,
  editUser,
} from "../../../services/user-new";
import { message } from "ant-design-vue";

const formData = ref({});

const handleSuccess = (type) => {
  if (type === "create") {
    reset();
  } else {
    getData();
  }
  isOpen.value = false;
};
// 点击模态框的取消
const handleCancel = () => {
  isOpen.value = false;
};

// 点击模态框的确定
const handleEditOrCreate = async () => {
  const isCreate = !formData.value.id;
  if (isCreate) {
    await createUser(formData.value);
    message.success("新增成功");
    reset();
  } else {
    await editUser(formData.value);
    message.success("修改成功");
    getData();
  }
  isOpen.value = false;
};

// 点击修改
const handleEdit = (record) => {
  formData.value = record;
  isOpen.value = true;
};
// 点击新增
const handleOpen = () => {
  formData.value = {};
  isOpen.value = true;
};
const passData = ref({});
const isOpen = ref(false);
const columns = [
  { title: "姓名", dataIndex: "username" },
  { title: "邮箱", dataIndex: "email" },
  { title: "操作", dataIndex: "methods" },
];
const dataSource = ref([]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["2", "3", "5", "10"],
});

// 搜索
const search = () => {
  pagination.value.current = 1;
  getData();
};
// 重置
const reset = () => {
  pagination.value.current = 1;
  pagination.value.pageSize = 10;
  passData.value = {};
  getData();
};
const handleTableChange = (pageObj) => {
  pagination.value = pageObj;
  getData();
};
const deleteItem = async (id) => {
  await deleteUser(id);
  message.success("删除成功！");
  getData();
};
const getData = async () => {
  const res = await getUsers({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
    ...passData.value,
  });
  dataSource.value = res.record;
  pagination.value.total = res.data.data.totalItems;
};
getData();
</script>
<style></style>
